<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1. 每个可迭代对象都有一个 [Symbol.iterator]属性 可以用for...of循环
      //2. 可迭代对象有 数组 ，nodeList , arguments , Set, Map 等
      //3. for...of 循环首先会调用  [Symbol.iterator]那到迭代对象 ， 然后循环调用 next 方法 拿到里面的value
      //4 , return 函数可以用于  for...of 中断 throw new Error  /  break;
      //自定义迭代器(数组本身自带)
      const arr1 = ["aaa", "bbb", "ccc"];
      function interarion(arr) {
        let index = 0;
        return {
          next: function () {
            if (index < arr.length) {
              return {
                value: arr[index++],
                done: false,
              };
            } else {
              return {
                value: undefined,
                done: true,
              };
            }
          },
        };
      }
      const inter = interarion(arr1);
      console.log(inter.next());
      console.log(inter.next());
      console.log(inter.next());
      console.log(arr1);
      //自定义迭代器（对象：对象本身没有迭代功能）
      const obj1 = {
        a: 1,
        b: 2,
        c: 3,
        [Symbol.iterator]: function () {
          const keys = Object.keys(this);
          let index = 0;
          return {
            next: function () {
              if (index < keys.length) {
                return {
                  value: keys[index++],
                  done: false,
                };
              } else {
                return {
                  value: undefined,
                  done: true,
                };
              }
            },
            return: function () {
              console.log("停止事件触发");
              return {
                value: "return",
              };
            },
          };
        },
      };
      const iteratotObj = obj1[Symbol.iterator]();
      for (let i of obj1) {
        if (i === "b") {
          throw new Error("error");
        }
        console.log(i);
      }
    </script>
  </body>
</html>
